<script>
import { adminList, addAdmin, updateAdmin, delAdmin } from '@/api/user'
// 导入路由的配置规则
import { routes } from '@/router/index'
import { ElMessage } from 'element-plus'

export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      // 当前页码
      currentPage: 1,
      // 用来标签是否打开抽屉效果
      drawer: false,
      // 路由的配置信息
      menus: routes[0].children,
      // 收集管理员数据的对象
      formData: {
        adminname: '',
        password: '',
        role: '',
        checkedKeys: []
      },
      // 默认被选中的内容
      defaultCheckedKeys: [],
      interfaceType: '10086' // 10086 添加管理员    10010 编辑管理员
    }
  },
  mounted () {
    //  请求数据
    adminList().then(res => {
      // console.log(res);
      // 获取请求的数据
      this.tableData = res.data
    })
  },
  methods: {
    close () {
      // 关闭抽屉的回调事件
      // 清空所有表单内容
      this.formData = {
        adminname: '',
        password: '',
        role: '',
        checkedKeys: []
      }

      // 清除掉默认选中内容
      this.defaultCheckedKeys = []

      // 清除掉树形结构中已经选中的效果
      this.$refs.treeRef.setCheckedKeys([])

    },
    // 添加按钮弹出抽屉效果
    addClick () {
      this.drawer = true
      this.interfaceType = '10086'
    },
    formatCheckedKeys () {
      // 用来获取树形结构中被选中的内容
      // console.log(this.$refs.treeRef.getCheckedNodes(true));

      // 获取到被选中的节点
      const list = this.$refs.treeRef.getCheckedNodes(true)

      // 用来放父级路由的 label 用的
      const tempList = []

      // 放最终结果用的
      const result = []

      list.forEach(item => {
        // item 是我们当前选中的路由
        // 第一次执行时 item 是管理员列表 - 找到父节点 账号管理， tempList 有了父级的 label,
        // result = [父路由，和当前变量的 item],账号管理，管理员列表
        // 第二次执行的时候 item 就是用户列表

        // 根据子节点获取到父级路由
        const parent = this.menus.find(myitem => {
          return myitem.children.some(child => child.label == item.label)
        })

        // 已经可以正常获取到父级路由了
        // console.log('1111111111111111', parent);

        if (tempList.includes(parent.label)) {
          // 如果条件处理就直接找到父级路由，在子路由中添加一个子路由
          result.find(item => item.label == parent.label).children.push(item)
        } else {
          // 如果没有该父级路由，那么就将其添加进去
          tempList.push(parent.label)

          result.push({
            label: parent.label,
            path: parent.path,
            children: [item]
          })
        }


        // console.log(result);
        // 将路由权限添加到 formData 中
        this.formData.checkedKeys = result

      })

    },
    add () {

      this.formatCheckedKeys()

      // console.log(this.formData);
      // 调用请求将 formData 传递过去
      addAdmin(this.formData).then(res => {
        // console.log(res);

        // 关闭抽屉效果
        this.drawer = false

        // 添加成功之后重新获取列表
        adminList().then(res => {
          // console.log(res);
          // 获取请求的数据
          this.tableData = res.data
        })

      })
    },
    // 编辑按钮的点击事件
    editClick (row) {
      // console.log(row);

      // 打开抽屉效果
      this.drawer = true
      this.interfaceType = '10010'

      this.formData.adminname = row.adminname
      this.formData.password = ''
      this.formData.role = row.role

      // 放被选中的内容
      const checkedKeys = []
      row.checkedKeys.forEach(parent => {
        parent.children.forEach(item => {
          checkedKeys.push(item.path)
        })
      })

      // 记录所有被选中的内容
      this.defaultCheckedKeys = checkedKeys

      // console.log(checkedKeys);

    },
    update () {
      // 提交编辑按钮的点击事件
      if (this.formData.adminname == '' || this.formData.password == '') {
        ElMessage.error('管理员名称和密码不能为空')
        return
      }

      // 获取被选中的内容
      this.formatCheckedKeys()

      // console.log(this.formData);
      // 发送数据请求可以帮我们将最新数据传递过去
      updateAdmin(this.formData).then(res => {

        // 更新数据时，管理员账号和密码无法被修改

        // console.log(res);
        // 关闭抽屉效果
        this.drawer = false

        // 添加成功之后重新获取列表
        adminList().then(res => {
          // console.log(res);
          // 获取请求的数据
          this.tableData = res.data
        })

      })

    },
    // 删除按钮的点击事件
    deleteClick (row) {
      // console.log(row);
      // confirm 消息确认框
      if (confirm('您确定要删除该数据吗?')) {
        delAdmin({ adminid: row.adminid }).then(res => {
          if (res.code == 200) {
            ElMessage.success('删除成功，加载最新数据')
            adminList().then(res => {
              // console.log(res);
              // 获取请求的数据
              this.tableData = res.data
            })
          } else {
            ElMessage.error('删除失败请稍后再试...')
          }
        })
      }
    }

  },
  computed: {
    // 根据当前页码获取到当前页的数据
    computedTableData () {
      return this.tableData.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  }
}
</script>
<template>
  <div>
    <div class="header">
      管理员列表
      <el-button type="primary" @click="addClick"> 添加管理员 </el-button>
    </div>


    <!-- --------------- 表格数据渲染 ---------------- -->
    <el-table :data="computedTableData" style="width: 100%">

      <el-table-column type="index" :index="(currentPage - 1) * 10 + 1" label="序号" width="180" />

      <el-table-column prop="adminname" label="管理员名称" width="180" />
      <el-table-column prop="role" label="管理员权限" width="180">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.role == 1">管理员</el-tag>
          <el-tag v-else>超级管理员</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- <el-button>编辑</el-button> -->
        <template #default="scope">
          <el-button type="primary" @click="editClick(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- -------------- 做分页显示用的 ----------------- -->
    <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage" :total="tableData.length" />


    <!-- -------------- 抽屉效果 ---------------- -->
    <el-drawer v-model="drawer" @close="close">

      <template #header>
        <h4> {{ interfaceType == '10086' ? "添加管理员" : "编辑管理员" }} </h4>
      </template>


      <el-form-item label="管理员账号">
        <el-input placeholder="请输入管理员账号" v-model="formData.adminname" />
      </el-form-item>
      <el-form-item label="管理员密码">
        <el-input placeholder="请输入管理员密码" v-model="formData.password" />
      </el-form-item>

      <el-form-item label="管理员角色">
        <el-select placeholder="请选择角色" v-model="formData.role">
          <el-option label="管理员" :value="1" />
          <el-option label="超级管理员" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-tree ref="treeRef" node-key="path" :default-checked-keys="defaultCheckedKeys" :data="menus"
          :default-expand-all="true" show-checkbox />
      </el-form-item>


      <el-button v-if="interfaceType == '10086'" @click="add"> 添加 </el-button>
      <el-button v-else @click="update"> 编辑(提交) </el-button>
    </el-drawer>


  </div>
</template>
<style scoped lang="scss">
.header {
  margin-bottom: 16px;
}
</style>
